<script setup lang="ts">
  import { ref,inject } from 'vue'
  import { onLoad,onShow } from '@dcloudio/uni-app'
  import { getTrainList, projectFilter } from '@/api/training'
  import { checkLogin, msg } from '@/utils/tools'
  import { userBindInstitutional } from '@/api/auth'
  import { useLogin } from '@/hooks/hooks'
  const campId = ref(0)
  const tranFilter = ref([])
  const motionList = ref([])
  const $Prefix = inject('$Prefix')
  const institutionalId = ref()
  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  // #ifndef H5
  const { top, bottom, height } = uni.getMenuButtonBoundingClientRect()
  const headerHeight = (top as number) + (bottom as number) + (height as number)
  // #endif
  // #ifdef H5
  const headerHeight = 60
  // #endif
  onLoad((options:any) => {
    if(options.scene){
      const sceneList = decodeURIComponent(options.scene).split('&')
      let params:any = {}
      for (let i= 0; i < sceneList.length; i++){
        let item = sceneList[i].split('=')
        params[item[0]] = item[1]
      }
      institutionalId.value = params.institutionalId
    }

    trainFun(() => {
      filterProjectList()
    })
  })
  onShow(() => {
    checkLogin(true).then(res => {
      userBindInstitutional({institutionalId:institutionalId.value})
    }).catch(err => {
      useLogin()
    })
  })

  // 获取训练营筛选
  const trainFun = (callBack:any) => {
    getTrainList().then(res => {
      if(res.code == 200){
        tranFilter.value = res.data.map((item:any,index:number) => {
          if(index == 0){
            campId.value = item.id
            item.active = true
          }else{
            item.active = false
          }
          return item
        })
      }
      if(callBack && typeof callBack == 'function'){
        callBack()
      }
    })
  }
  const filterProjectList = async () => {
    const projectData = await projectFilter({campId:campId.value})
    if(projectData.code == 200){
      motionList.value = projectData.data.map((item:any) => {
        if(item.icon){
          item.icon = JSON.parse(item.icon)
        }
        return item
      })
    }
  }
  const filterClick = (item:any) => {
    tranFilter.value.map((items:any) => {
      items.active = false
      return items
    })
    item.active = true
    campId.value = item.id
    filterProjectList()
  }

  const handlerEvent = (data:any) => {
    if(data.eventsId){
      uni.navigateTo({url:`/pages/trainDetails/trainDetails?id=${data.eventsId}&campId=${campId.value}`})
    }else{
      msg(`${data.name}还未开始报名，敬请期待~`)
    }
  }
</script>
<template>
  <view class="train-body">
    <view class="header-bar">
      <xx-title title="机构训练营报名"/>
      <scroll-view class="train-list" :scroll-x="true">
        <view class="train-list-item" @click="filterClick(item)" :class="{active:item.active}" v-for="item in tranFilter" :key="item.id">
          {{item.name}}
        </view>
      </scroll-view>
    </view>
    <view class="motion-body" :style="{paddingTop:`${headerHeight + 100}rpx`}">
      <view class="motion-item" v-for="item in motionList" :key="item.id" @click="handlerEvent(item)">
        <image mode="heightFix" v-if="item.icon && item.icon.length > 0" :src="item.icon[0].fullUrl"/>
        <view class="motion-name">{{ item.name }}</view>
      </view>
    </view>
    <xx-movable-area />
  </view>
</template>
<style lang="scss" scoped>
  .train-body{
    min-height:100vh;
    .header-bar{
      position: fixed;
      width: 100%;
      background: linear-gradient(180deg, #EFF7E8 0%, #FFFFFF 100%);
      .header{
        display: flex;
        align-items: center;
        .train-title{
          padding-left: 10rpx;
        }
      }
      .train-list{
        padding: 0 28rpx;
        white-space: nowrap;
        margin-top: 10rpx;
        .train-list-item{
          padding: 5rpx 24rpx;
          background: #F6F6F6;
          margin-right: 10rpx;
          border-radius: 100rpx;
          font-weight: 500;
          color:#505363;
          display: inline-block;
          font-size: 28rpx;
          margin-bottom: 10rpx;
          position: relative;
          &:last-child{
            margin-right: 0;
          }
          &.active{
            color: #7B9462;
            font-size: 30rpx;
            font-weight: bold;
            border:1rpx solid #7B9462;
            background: #EDF4E6;
          }
        }
      }
    }
    .motion-body{
      width: 100%;
      padding: 0 10rpx;
      display: grid;
      gap: 10rpx;
      grid-template-columns: repeat(4, calc(25% - 10rpx));
      .motion-item{
        text-align: center;
        image{
          height: 120rpx;
        }
        .motion-name{
          font-size: 28rpx;
        }
      }
    }
  }
</style>
